<template>
  <div class="about contanier">
    <div class="test">
      <h1>关于组件</h1>
      <div class="test1">
        <p>123</p>
      </div>
      <div class="test2">
        <p>1</p>
        <div>
          <p>2</p>
        </div>
      </div>
      <div class="test3">
        <div>111</div>
        <div>222</div>
        <div>333</div>
      </div>
      <div class="test4">
        <a href="#">百度一下</a>
      </div>
    </div>
    <div class="main">
      <div class="m1">1</div>
      <div class="m1">2</div>
      <!-- <div class="m1">3</div>
      <div class="m1">4</div>
      <div class="m1">5</div> -->
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import "@assets/content.scss";
// 生成后代选择器：.test h1{} .test p{}
.test {
  h1 {
    font-size: $font-size;
    border-bottom: $border-bottom;
  }
  p {
    font-size: $font-size;
    border-bottom: $border-bottom;
  }
}
// 编译成：.test2 > p {}
.test2 {
  height: 100px;
  background-color: lightblue;
  > p {
    font-size: 20px;
    color: blue;
  }
}
.test3 {
  div {
    height: 100px;
    &:first-child {
      font-weight: bolder;
    }
    &::before {
      content: "";
    }
  }
}
.main {
  height: 200px;
  background: gray;
  // 特性：
  // 1. 只要给父元素设置弹性布局，所有子元素都转化为行内块元素。
  // 2. 当前弹性布局容器存在两个轴线：默认水平方向为主轴，垂直方向是交叉轴。子元素默认沿主轴排列。
  // 3. 当父元素空间不够时，所有子元素会强制压缩空间，以保证内容不溢出。默认所有子元素等比例压缩。
  // 4. 当父元素空间足够时，所有子元素不会扩展父元素空间，子元素的width来决定大小。
  display: flex;
  // flex-direction: 设置主轴的方向。row水平方向是主轴，column垂直方向为主轴。
  flex-direction: row;
  // justify-content: 设置子元素在主轴的排列方式。
  justify-content: center;
  // align-items: 设置子元素在交叉轴的排列方式。
  align-items: flex-start;
  // 如果不想子元素被压缩，可以换行显示。
  // flex-wrap: wrap;
  > div {
    width: 100px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    // flex-grow: 1;
    // flex-shrink：当父元素空间不够的时候，子元素应该如何压缩。
    // flex-grow：当父元素空间足够的时候，子元素应该如何分配父元素的剩余空间。
    // flex-shrink: 0; // 每一个子元素都禁止压缩
    &:nth-child(2n) {
      // flex-shrink: 1;
      flex-grow: 1;
      background-color: yellow;
    }
    &:nth-child(2n + 1) {
      flex-grow: 3;
      // flex-shrink: 3;
      background-color: red;
    }
  }
}
// // sass：靠缩进实现样式的编写。不支持{}和分号。它也是CSS的扩展语言。
// // sass、scss、less等都是CSS扩展语言。scss隶属于sass，是sass的升级版，写法更贴近css样式。
// .test
//   width: 200px
//   height: 200px
//   background-color: red
//   p
//     color: blue
//     font-size: 20px
</style>
